import { RepoLink } from 'libframe-docs/components/RepoLink'
import TourRecommendation from '../components/TourRecommendation.mdx'

<TourRecommendation />

To add `vite-plugin-ssr` to an existing Vite app:

1. Add `vite-plugin-ssr` to your `vite.config.js`.

   - <RepoLink text="Example" path="/boilerplates/boilerplate-vue/vite.config.js" />

2. Add the `vite-plugin-ssr` server middleware.

   - <RepoLink text="Example" path="/boilerplates/boilerplate-vue/server/index.js" />

3. Define `_default.page.client.js` and `_default.page.server.js`.

   - <RepoLink text="Vue Example" path="/boilerplates/boilerplate-vue/renderer/" />
   - <RepoLink text="Vue + TypeScript Example" path="/boilerplates/boilerplate-vue-ts/renderer/" />
   - <RepoLink text="React Example" path="/boilerplates/boilerplate-react/renderer/" />
   - <RepoLink text="React + TypeScript Example" path="/boilerplates/boilerplate-react-ts/renderer/" />

4. Create your first `.page.js` file.

   - <RepoLink text="Vue Example" path="/boilerplates/boilerplate-vue/pages/index/index.page.vue" />
   - <RepoLink text="Vue + TypeScript Example" path="/boilerplates/boilerplate-vue-ts/pages/index/index.page.vue" />
   - <RepoLink text="React Example" path="/boilerplates/boilerplate-react/pages/index/index.page.jsx" />
   - <RepoLink text="React + TypeScript Example" path="/boilerplates/boilerplate-react-ts/pages/index/index.page.tsx" />

5. Add the `dev` and `build` scripts to your `package.json`.

   - <RepoLink text="Example" path="/boilerplates/boilerplate-vue/package.json" />
